<template>
  <!-- 开通二级列表 -->
  <div>
    <div class="table-page-search-wrapper">
      <!-- 查询条件 -->
      <a-form layout="inline" class="formModel" style="padding:20px 20px 0 20px">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="时间">
              <a-range-picker v-model="timeSelect" :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" @change="onChange" />
            </a-form-item>
          </a-col>
          <a-col :md="1" :sm="24">
            <a-button type="primary" @click="selectEvent">查询</a-button>
          </a-col>
          <a-col :md="2" :sm="24">
            <a-button @click="download" type="primary" icon="export">excel导出</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 表格 -->
    <a-table :columns="columns" :dataSource="dataSource" :pagination="false" :loading="tableLoading" bordered size="middle" style="width:100%;padding:5px 15px">
      <template slot="ckNum" slot-scope="text, record">
        <a @click="seeWorkOrderList(record,2)">{{ text }}</a>
      </template>
      <template slot="kbNum" slot-scope="text, record">
        <a @click="seeWorkOrderList(record,0)">{{ text }}</a>
      </template>
      <template slot="kjNum" slot-scope="text, record">
        <a @click="seeWorkOrderList(record,3)">{{ text }}</a>
      </template>
      <template slot="kkNum" slot-scope="text, record">
        <a @click="seeWorkOrderList(record,1)"> {{ text }}</a>
      </template>
    </a-table>
     <!-- 工单列表 -->
     <WorkOrderList v-if="showPage" :queryParam="queryParam" @cancelEvent="cancelEvent"></WorkOrderList>


  </div>
</template>

<script>
import WorkOrderList from '@/views/analysisManage/opening/workOrderList/workOrderList'
import { getAllInfo, openingGridExport } from '@/api/public'
import { getNowTime, getNowFormatDate } from '@/utils/util'
import moment from 'moment'
export default {
  components: {WorkOrderList},
  data() {
    return {
      showPage:false,
      infoData: {},
      startTime: '',
      endTime: '',
      dataSource: [],
      tableLoading: false,
      columns,
      timeSelect: '',
      queryParam: {},
    }
  },
  created() {
    this.startTime = getNowTime()[0]+" 00:00:00"
    this.endTime = getNowTime()[1]+" 23:59:59"
    this.timeSelect = [moment(getNowTime()[0]), moment(getNowTime()[1])]
    this.getDataInfo()
  },
  mounted() {},
  methods: {
    moment,
    //表格数据查询
    getDataInfo() {
      this.tableLoading = true
      getAllInfo(this.startTime,this.endTime).then(
        (res) => {
          res.code == 200 ? (this.dataSource = res.data) : this.$message.error(res.msg)
          this.tableLoading = false
        },
        (error) => {
          this.$message.error(error)
          this.tableLoading = false
        }
      )
    },
    //文档导出
    download() {
      openingGridExport(this.startTime,this.endTime)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '开通列表.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },

    //转小数
    toPoint(percent) {
      var str = percent.replace('%', '')
      str = str / 100
      return str
    },
    //转百分数
    toPercent(point) {
      var str = Number(point * 100).toFixed(1)
      str += '%'
      return str
    },
    //时间查询
    onChange(date, dateString) {
      this.startTime = dateString[0] + ' 00:00:00'
      this.endTime = dateString[1] + ' 23:59:59'
    },
    //查询
    selectEvent() {
      this.getDataInfo()
    },
    //取消工单列表
    cancelEvent(){
      this.showPage =false
    },
    //查看工单列表
    seeWorkOrderList(e,type){
      this.queryParam.type =type
      this.queryParam.country = e.country 
      this.queryParam.startTime = this.startTime  
      this.queryParam.endTime =  this.endTime
      this.showPage =true
    }
  },
}

const columns = [
  {
    title: '区县',
    dataIndex: 'country',
    width: 100,
    align: 'center',
  },
  {
    title: '集团专线',
    children: [
      {
        title: '快开占比',
        children: [
          {
            title: '总量',
            dataIndex: 'kbNum',
            scopedSlots: { customRender: 'kbNum' },
            width: 100,
            align: 'center',
          },
          {
            title: '占比',
            dataIndex: 'kbRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '快开',
        children: [
          {
            title: '总量',
            dataIndex: 'kkNum',
            scopedSlots: { customRender: 'kkNum' },
            width: 100,
            align: 'center',
          },
          {
            title: '平均时长',
            dataIndex: 'kkLong',
            width: 100,
            align: 'center',
          },
          {
            title: '回单',
            dataIndex: 'kkRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '查勘',
        children: [
          {
            title: '总量',
            dataIndex: 'ckNum',
            scopedSlots: { customRender: 'ckNum' },
            width: 100,
            align: 'center',
          },
          {
            title: '平均时长',
            dataIndex: 'ckLong',
            width: 100,
            align: 'center',
          },
          {
            title: '回单',
            dataIndex: 'ckRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '快建',
        children: [
          {
            title: '总量',
            dataIndex: 'kjNum',
            scopedSlots: { customRender: 'kjNum' },
            width: 100,
            align: 'center',
          },
          {
            title: '平均时长',
            dataIndex: 'kjLong',
            width: 100,
            align: 'center',
          },
          {
            title: '回单',
            dataIndex: 'kjRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '合同签订',
        align: 'center',
        children: [
          {
            title: '及时率',
            dataIndex: 'htRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '全流程',
        align: 'center',
        children: [
          {
            title: '及时率',
            dataIndex: 'allRate',
            width: 100,
            align: 'center',
          },
        ],
      },
    ],
  },
]
</script>

<style >
</style>
